<!--
 * @Author: zegobuilder zegobuilder@zego.im
 * @Date: 2022-11-01 19:50:11
 * @LastEditors: zegobuilder zegobuilder@zego.im
 * @LastEditTime: 2023-01-09 16:29:24

-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Zego Express Video Call</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- <script src="./dist/ZegoExpressWebRTC.js"></script> -->
  <script src="./js/ZegoExpressWebRTC-2.22.0.js"></script>
  <link rel="stylesheet" href="./css/styles.css" />
</head>

<body>
  <h1>Zego RTC Video Call</h1>
  <div class="video-wrapper">
    <button onclick="logoutRoom()">退出房间</button>
    <button onclick="login()">登录</button>
    <button onclick="addCamera()">新增摄像头</button>
    <button onclick="enableCamera()">开关摄像头</button>
    <button onclick="enableMic()">开关麦克风</button>
    <br />
    <hr />
    <h4>Local video</h4>
    <h4>Remote video</h4>
    <video id="local-video" autoplay muted playsinline controls></video>
    <!-- <video id="remote-video" autoplay muted playsinline controls></video> -->
    <div id="rv"></div>
  </div>
  <div id="information"></div>
</body>
<script>
  //初始化信息
  let appID = 2375819786
  let server = 'wss://webliveroom2375819786-api.zego.im/ws'

  let userID = 'alagong' // userID 用户自己设置，必须保证全局唯一
  let userName = '阿拉贡' // userName 用户自己设置，没有唯一性要求
  let roomID = 'room007' // roomID 用户自己设置，必须保证全局唯一

  let localStream = null
  let localAuidoStream = null
  let localVideoStream = null
  let localVideoTrack = null
  let localAudioTrack = null
  let mutedCamera = false
  // 初始化实例
  const zg = new ZegoExpressEngine(appID, server)
  zg.setDebugVerbose(false);
  window.onload = function () {
    login()
  }
  zg.on('roomStateUpdate', async (roomID, state, errorCode, extendedData) => {
    if (state == 'CONNECTED') {
      //获取音频流
      localAuidoStream = await zg.createStream({
        camera: {
          video: false,
          audio: true
        },
      })
      //获取音轨
      localAudioTrack = localAuidoStream.getAudioTracks()[0]

      //构造音视频流
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      const sourceStream = canvas.captureStream(15)

      // 传入zego获取可操作流
      localStream = await zg.createStream({
        custom: {
          source: sourceStream
        }
      })
      //将构造流音轨替换
      zg.replaceTrack(localStream, localAudioTrack)
      let streamID = new Date().getTime().toString()
      zg.startPublishingStream(streamID, localStream)
      //预览流
      const localVideo = document.getElementById('local-video')
      localVideo.srcObject = localStream
    }
  })

  // 加入房间
  fetch(
      `https://wsliveroom-alpha.zego.im:8282/token?app_id=${appID}&id_name=${userID}`
    )
    .then((rsp) => rsp.text())
    .then((token) => {
      accessToken = token
    })

  function login() {
    zg.loginRoom(
        roomID,
        accessToken, {
          userID,
          userName
        }, {
          userUpdate: true
        }
      )
      .then((rsp) => console.error('[xxx]', rsp))
      .catch((err) => console.error('[yyyy]', err))
  }

  function logoutRoom() {
    zg.logoutRoom(roomID)
  }

  async function addCamera() {
    //获取视频流
    localVideoStream = await zg.createStream({
      camera: {
        video: true,
        audio: false
      },
    })
    //获取视轨
    localVideoTrack = localVideoStream.getVideoTracks()[0]
    //将构造流视轨替换
    zg.replaceTrack(localStream, localVideoTrack)
  }
  //开关摄像头
  function enableCamera() {
    mutedCamera = !mutedCamera
    zg.mutePublishStreamVideo(localStream, mutedCamera)
  }
  //开关麦克风
  function enableMic() {
    mutedCamera = !mutedCamera
    zg.mutePublishStreamAudio(localStream, mutedCamera)
  }
</script>

</html>